<template>
   <div>
     <ui-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
       <ui-table-column type="selection" width="55"> </ui-table-column>
       <ui-table-column label="日期" width="120">
         <template slot-scope="scope">{{ scope.row.date }}</template>
       </ui-table-column>
       <ui-table-column prop="name" label="姓名" width="120"> </ui-table-column>
       <ui-table-column prop="address" label="地址" show-overflow-tooltip> </ui-table-column>
     </ui-table>
     <div style="margin-top: 20px">
       <ui-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</ui-button>
       <ui-button @click="toggleSelection()">取消选择</ui-button>
     </div>
   </div>
 </template>
 
 <script>
 export default {
   /* DELETE */
   desc:
     '实现多选非常简单: 手动添加一个`ui-table-column`，设`type`属性为`selection`即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用`show-overflow-tooltip`属性，它接受一个`Boolean`，为`true`时多余的内容会在 hover 时以 tooltip 的形式显示出来。',
   /* DELETE */
   data() {
     return {
       tableData: [
         {
           date: '2016-05-03',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-04',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-01',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-08',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-06',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         },
         {
           date: '2016-05-07',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
         }
       ],
       multipleSelection: []
     };
   },
 
   methods: {
     toggleSelection(rows) {
       if (rows) {
         rows.forEach((row) => {
           this.$refs.multipleTable.toggleRowSelection(row);
         });
       } else {
         this.$refs.multipleTable.clearSelection();
       }
     },
     handleSelectionChange(val) {
      console.log('你好');
      
       this.multipleSelection = val;
       console.log(this.multipleSelection);
       
     }
   }
 };
 </script>
 